import React from 'react';
import { WeaEchart } from 'ecCom';
import Header from './Common/header';

export default class Content_reportForm extends React.Component {
    componentDidMount() {
        this.refs.chart && this.refs.chart.paint();
    }
    render() {
        const { data = {}, eid } = this.props;
        const { iconMore, moreLocal } = data;
        const option = {
            title: {
                text: '销量柱状图',
            },
            tooltip: {},
            legend: {
                data: ['销量'],
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
            }],
        };
        return (
            <div className="item" id={`item_${eid}`}>
                <Header ecId={`${this && this.props && this.props.ecId || ''}_Header@xbi2pt`} data={data} eid={eid} />
                <div className="content" id={`content_${eid}`}>
                    <div className="content_view" id={`content_view_id_${eid}`}>
                        <div style={{ height: 350 }}>
                            <div style={{ height: 300 }}>
                                <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@17szdv`} ref="chart" option={option} useDefault={false} />
                            </div>
                        </div>
                    </div>
                </div>
                <div className="footer" id={`footer_${eid}`} style={{ textAlign: 'right' }}>
                    {moreLocal == 'footer' ? <a href="javascript:;"><img src={iconMore} alt="" /></a> : ''}
                </div>
            </div>
        );
    }
}
